<template>
	<view class="contain">
		<block v-if="showPage">
		<view class="noData-contain" v-if="addressList.length==0"><u-empty   mode="address"></u-empty></view>
		<view v-else class="content-contain">
			<view class="address-item" v-for="(item, index) in addressList" :key="index">
			    <view class="item-userinfo" @click="chooseAddress(item)">
			        <view>{{ item.connector }}</view>
			        <view>{{ item.phone }}</view>
			    </view>
			    <view class="item-address" @click="chooseAddress(item)">
			            {{ item.province }} {{ item.city }} {{ item.region }}
			            {{ item.address }}
			    </view>
			    <van-divider />
			    <view class="item-operation">
			            <view class="operation-defalut">
			               <van-checkbox
			                v-model="item.isDefault"
			                icon-size="4vw"
			                style="margin-right: 2vw"
			                @change="setDefault(item,item.isDefault)"
			               >
			               </van-checkbox>
			               默认地址
			            </view>
			            <view class="operation-crud">
			               <view class="crud-edit" @click="edit(item)">
			                 <image style="width: 4vw;height: 4vw;margin-right: 12rpx;" src="@/static/shop/address/edit.png" />
			                 <span>编辑</span>
			               </view>
			               <view class="crud-del" @click="del(item)">
			                <image  style="width: 4vw;height: 4vw;margin-right: 12rpx;" src="@/static/shop/address/del.png" />
			                <span>删除</span>
			               </view>
			            </view>
			    </view>
			</view>
		</view>
		<van-dialog id="van-dialog" />
		</block>
		<view class="btn-fiexd"><u-button @click="goAddAddress" style="width: 80vw;" shape='circle' type="primary">添加新地址</u-button></view>
	</view>
</template>

<script>
	import api from '../../untils/api.js'
	import Dialog from '../../wxcomponents/vant/dist/dialog/dialog';
	export default {
		data() {
			return {
				isChoose:false,
				orderId:0,
				addressList:[],
				showModel:false,
				content:"是否确认删除此地址？",
				showPage:false,
			}
		},
		methods: {
			chooseAddress(item){
				if(this.isChoose){
					uni.navigateBack();
					var obj={id:item.id,connector:item.connector,phone:item.phone,province:item.province,city:item.city,region:item.region,address:item.address}
					this.$bus.$emit("chooseAddress",obj);
				}
				if(this.orderId){
					const query = {
					    id: Number(this.orderId),
					    addressId: item.id,
					 };
					 uni.showModal({
					 	 content: '是否确认修改此地址?',
					 	 success (res) {
					 	if (res.confirm) {
					 		api.SM_ORDER_UPDATE_SHIPPING_ADDRESS(JSON.stringify(query)).then((res)=>{
					 				if(res.data.header.result_code==0){
				                        uni.showToast({
				                        	icon:"none",
											title:"地址修改成功！",
											duration:1000,
				                        })
										setTimeout(()=>{uni.navigateBack();},500)
					 				}
					 		})
					 	 } else if (res.cancel) {
					 				console.log('用户点击取消')
					 		}
					 	 }
					   })
				}
			},
			async setDefault(item,isDefault) {
			      if (isDefault.detail === false){
			        uni.showToast({
			        	title: "默认地址不能为空！",
						icon:'none',
			        	duration:1000
			        });
			      } else  {
			        try {
			          await api.SM_SET_DEFAULT_SHIPPING_ADDRESS(JSON.stringify(item.id));
			        } catch (error) {
			        } finally {
						uni.showToast({
							title: "设置成功！",
							icon:'success',
							duration:1000
						})
						setTimeout(()=>{
							this.init();
						},1000);
			        }
			    }
			},
			del(i){
				 Dialog.confirm({
				        message: "是否确认删除此地址?",
						closeOnClickOverlay:true,
				      })
				.then(async () => {
					            try {
					              await api.SM_SHIPPING_ADDRESS_DELETE(JSON.stringify(i.id));
					            } catch (error) {
					            } finally {
					              this.init();
					            }
					          })
			   .catch(() => {});
			},
			edit(item){
				uni.navigateTo({
					url:`../addAddress/addAddress?item=${JSON.stringify(item)}&isEdit=1`
				})
			},
			goAddAddress(){
				uni.navigateTo({
					url:`../addAddress/addAddress`
				})
			},
		  async	init(){
				this.showPage=false;
				uni.showLoading({
					title:"加载中"
				});
				var obj={nowPage:1,pageSize:9999,startRecord:0,parameters:{},condition:{oredCriteria:[[]]}}
			  await	api.SM_SHIPPING_ADDRESS_LIST_FOR_PAGE(JSON.stringify(obj)).then((res)=>{
					this.addressList=res.data.body.exhibitDatas
				})
				this.showPage=true;
				uni.hideLoading();
			},
		},
		onShow() {
			this.init();
		},
		onLoad(e) {
			this.isChoose=e.isChoose
			this.orderId=e.orderId
		}
	}
</script>

<style lang="scss" scoped>
	.noData-contain{
		margin-top: 35vh;
	}
	.btn-fiexd{
		position: fixed;
		bottom: 50rpx;
		width: 100vw;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	@function autoH($width, $height) {
	  @return $width/$height;
	}
   .address-item {
	  $height: autoH(750px, 280px);
	  height: calc(100vw / #{$height});
	  background: #fff;
	  border-radius: 4vw;
	  margin-top: 3vh;
	  box-shadow: 0px 0px 12px 0px rgba(78, 92, 117, 0.08);
	  padding: 5vw;
	  white-space: nowrap;
	  .item-userinfo {
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    view:first-child {
	      font-size: 5vw;
	      font-weight: bold;
	      width: 60vw;
	      text-overflow: ellipsis;
	      overflow: hidden;
	    }
	    view:last-child {
	      font-size: 4.2vw;
	      color: #636363;
	      text-overflow: ellipsis;
	      overflow: hidden;
	    }
	  }
	  .item-address {
		width: 90vw;
	    margin-top: 3vw;
	    font-size: 4vw;
	    color: #333;
	    text-overflow: ellipsis;
	    overflow: hidden;
	  }
	  .item-operation {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    .operation-defalut {
	      font-size: 3.7vw;
	      font-weight: 500;
	      color: #878787;
	      display: flex;
		  flex-direction: row;
		  align-items: center;
	    }
	    .operation-crud {
	      display: flex;
	      font-size: 3.7vw;
	      font-weight: bold;
		  flex-direction: row;
		  align-items: center;
	      view {
	        display: flex;
			flex-direction: row;
	        align-items: center;
	        margin-left: 7vw;
	      }
	    }
	  }
	}
   .contain{
	   width: 100vw;
	   min-height: 100vh;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
	   background: rgb(245,247,249);
	   padding-bottom: 160rpx;
	   margin-bottom: 1rpx;
   }
</style>
